<template>
	<!-- 三级分类 begin -->
	<Category :scene="scene"></Category>
	<!-- 三级分类 end -->
	<!-- 属性值展示 begin -->
	<el-card style="margin: 10px 0px">
		<!-- 平台属性数据展示场景 begin -->
		<div v-show="scene == 0">
			<!-- 添加平台属性按钮 begin -->
			<el-button
				type="primary"
				:icon="Plus"
				:disabled="categoryStore.c3Id ? false : true"
				@click="addAttr"
				>添加平台属性</el-button
			>
			<!-- 添加平台属性按钮 end -->
			<!-- 平台属性数据展示 begin -->
			<el-table
				border
				style="margin: 10px 0px"
				:data="attrArr"
				v-if="attrArr.length > 0"
			>
				<!-- 序号 begin -->
				<el-table-column
					label="序号"
					width="80"
					type="index"
				></el-table-column>
				<!-- 序号 end -->

				<!-- 属性名称 begin -->
				<el-table-column
					label="属性名称"
					width="200"
					prop="attrName"
				></el-table-column>
				<!-- 属性名称 end -->

				<!-- 属性值名称 begin -->
				<el-table-column label="属性值名称">
					<template #="{ row, $index }">
						<el-tag
							v-for="item in row.attrValueList"
							:key="item.id"
							style="margin: 0 5px"
							:type="item.id % 2 == 0 ? 'warning' : 'success'"
							>{{ item.valueName }}</el-tag
						>
					</template>
				</el-table-column>
				<!-- 属性值名称 end -->
				<!-- 操作 begin -->
				<el-table-column
					label="操作"
					width="200"
				>
					<template #="{ row, $index }">
						<!-- 编辑按钮 begin -->
						<el-button
							:icon="Edit"
							size="small"
							type="warning"
						></el-button>
						<!-- 编辑按钮 end -->
						<!-- 删除按钮 begin -->
						<el-popconfirm title="你确定删除吗？">
							<template #reference>
								<el-button
									:icon="Delete"
									size="small"
									type="danger"
								></el-button>
							</template>
						</el-popconfirm>
						<!-- 删除按钮 end -->
					</template>
				</el-table-column>
				<!-- 操作 begin -->
			</el-table>
			<!-- 平台属性数据展示 end -->
			<!-- 平台属性没有数据 展示此处 begin -->
			<el-empty
				v-else
				:image-size="200"
			></el-empty>
			<!-- 平台属性没有数据 展示此处 end -->
			<!--  -->
		</div>
		<!-- 平台属性数据展示场景 end -->

		<!-- 添加属性场景 begin -->
		<div v-show="scene == 1">
			<!-- 属性名字表单 begin -->
			<el-form :inline="true">
				<el-form-item label="属性名字">
					<el-input
						placeholder="请输入属性名称"
						v-model="attrParams.attrName"
					></el-input>
				</el-form-item>
			</el-form>
			<!-- 属性名字表单 end -->

			<!-- 添加属性值 取消  按钮 begin -->
			<el-button
				type="primary"
				:icon="Plus"
				:disabled="attrParams.attrName ? false : true"
				@click="addAttrValue"
			>
				添加属性值
			</el-button>
			<el-button
				type="primary"
				@click="cancel"
			>
				取消
			</el-button>
			<!-- 添加属性值 取消  按钮 end -->

			<!-- 属性值 表格 begin -->
			<el-table
				border
				style="margin: 10px 0px"
				:data="attrParams.attrValueList"
			>
				<el-table-column
					label="序号"
					width="80"
					type="index"
					align="center"
				></el-table-column>
				<!-- 属性值 begin -->
				<el-table-column label="属性值">
					<template #="{ row, $index }">
						<el-input
							placeholder="请输入属性值"
							v-model="row.valueName"
							v-if="flag"
							@blur="toLook"
						></el-input>
						<div
							class="look"
							v-else
							@click="toEdit"
						>
							{{ row.valueName }}
						</div>
					</template>
				</el-table-column>
				<!-- 属性值 end-->
				<el-table-column label="操作">
					<template #="{ row, $index }">
						<!-- 编辑按钮 begin -->
						<el-button
							:icon="Edit"
							size="small"
							type="warning"
							@click="toEdit"
						></el-button>
						<!-- 编辑按钮 end -->
						<!-- 删除按钮 begin -->
						<el-popconfirm title="你确定删除吗？">
							<template #reference>
								<el-button
									:icon="Delete"
									size="small"
									type="danger"
								></el-button>
							</template>
						</el-popconfirm>
						<!-- 删除按钮 end -->
					</template>
				</el-table-column>
			</el-table>
			<!-- 属性值 表格 end -->
			<!-- 保存 取消按钮 begin -->
			<el-button
				type="primary"
				@click="save"
				:disabled="attrParams.attrValueList.length > 0 ? false : true"
			>
				保存
				<el-icon class="el-icon--right">
					<Collection />
				</el-icon>
			</el-button>
			<el-button
				type="primary"
				@click="cancel"
			>
				取消
			</el-button>
			<!-- 保存 取消按钮 end -->
		</div>
		<!-- 添加属性场景 end -->
	</el-card>
	<!-- 属性值展示 end -->
</template>

<script setup lang="ts">
	import { Plus, Delete, Edit, Collection } from '@element-plus/icons-vue';
	import { ElMessage } from 'element-plus';
	import { ref, watch, onUnmounted } from 'vue';
	import {
		reqAttr,
		reqAddOrUpdateAttr,
	} from '../../../api/product/attr/index';
	//引入仓库数据
	import useCategoryStore from '@/stores/category';
	let categoryStore = useCategoryStore();
	//存储平台属性与属性值
	let attrArr = ref([]);

	//动态数据切换属性展示和属性添加场景
	let scene = ref(0);

	//新增平台属性收集数据
	let attrParams = ref({
		attrName: '', //属性名字
		attrValueList: [],
		categoryId: categoryStore.c3Id, //三级分类的ID
		categoryLevel: 3, //给三级分类追加新的属性
	});
	//控制编辑模式和查看模式的切换
	let flag = ref(true);
	//监听三级分类的变化
	watch(
		() => categoryStore.c3Id,
		() => {
			//监听到三级分类变化，请求平台属性数据
			console.log('监听三级分类id变化:', categoryStore.c3Id);
			if (categoryStore.c3Id == '') return;
			getAttr();
		}
		//{ immediate: true }  //立即监听
	);

	//请求平台属性数据
	const getAttr = async () => {
		//收集请求数据
		let { c1Id, c2Id, c3Id } = categoryStore;
		console.log('收集分类id:', c1Id, c2Id, c3Id);
		let result: any = await reqAttr(c1Id, c2Id, c3Id);
		console.log('请求平台属性:', result);
		//请求回来的数据给属性attrArr赋值
		attrArr.value = result;
	};

	//添加平台属性按钮回调
	const addAttr = () => {
		//下拉禁用
		//展示属性和添加属性场景切换
		scene.value = 1;

		attrParams.value = {
			attrName: '', //属性名字
			attrValueList: [],
			categoryId: categoryStore.c3Id, //三级分类的ID
			categoryLevel: 3, //给三级分类追加新的属性
		};
	};
	//添加平台属性取消按钮回调
	const cancel = () => {
		//切换到属性展示场景
		//取消下拉的禁用
		scene.value = 0;
	};
	//添加属性值按钮回调
	const addAttrValue = () => {
		//属性值数组添加一个属性对象{valueName:''}
		attrParams.value.attrValueList.push({ valueName: '' });
	};
	//点击保存按钮回调
	/**
	 * 请求成功：
	 * 1、切换场景
	 * 2、捞数据
	 *
	 * **/
	const save = async () => {
		try {
			await reqAddOrUpdateAttr(attrParams.value);
			ElMessage({
				type: 'success',
				message: '添加成功',
			});
			scene.value = 0;
			getAttr();
		} catch (error) {
			ElMessage({
				type: 'error',
				message: '添加失败',
			});
		}
	};

	//表单元素失去焦点的回调@blur = toLook
	//值不能为空  =>div没有高度
	const toLook = (row, $index) => {
		//值不能为空  =>div没有高度
		//判断input是否为空
		//    if(){}
		//改成查看模式
		flag.value = false;
	};
	//点击div切换编辑模式
	const toEdit = () => {
		flag.value = true;
	};
	//组件销毁前 清除下拉
	onUnmounted(() => {
		categoryStore.c1Arr = [];
		categoryStore.c1Id = '';
		categoryStore.c2Arr = [];
		categoryStore.c2Id = '';
		categoryStore.c3Arr = [];
		categoryStore.c3Id = '';
	});
</script>

<style scoped></style>
